<template>
  <div id="parameter">
    <el-row :gutter="20">
        <el-col :span="300">
          <el-card
            style="width: 600px;background-color:#2f4052;border: solid #01154e 1px;color: rgba(255, 255, 255, 0.651);">
            <template #header><el-icon style="margin-right: 10px;">
                <Menu />
              </el-icon>尺寸类别</template>
            <div>
              <el-button type="success" size="default" icon="Tools" style="margin-bottom: 10px;"
                @click="f_AddClassDlg">添加</el-button>
              <el-table :data="bbs_classData" border style="width: 100%;font-weight: normal;">
                <el-table-column prop="value" label="编码" width="160" />
                <el-table-column prop="label" label="类别" width="160" />
                <el-table-column label="编辑">
                  <template #default="scope">
                    <el-button type="primary" size="default" icon="Tools" title="编辑" @click="f_EditClassDlg(scope.row)">
                    </el-button>
                    <el-button type="danger" size="default" icon="Delete" title="删除"
                      @click="f_Del(scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">

        </el-col>
        <el-col :span="8">

        </el-col>
      </el-row>
    <!-- <div class="el-select__wrapper" style="cursor:default;padding: 20px;">
      

    </div> -->
  </div>

<div class="weihweih">
  <el-dialog v-model="classdialogVisible" title="&nbsp;&nbsp; 信息维护" width="500"  style=" background-color: #2F4052;color: #B2C9EE !important; font-size: 18px !important;">
    <el-form :model="form" label-width="auto" style="max-width: 600px;color: #B2C9EE;padding: 20px">
      <el-form-item label="编码：" label-width="80">
        <el-input v-model="form.value" />
      </el-form-item>
      <el-form-item label="名称：" label-width="80">
        <el-input v-model="form.label" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="f_Save" icon="Check">保存</el-button>
        <el-button @click="classdialogVisible = false" icon="Close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import $sys from "../../api/sys";
import { useRouter } from 'vue-router';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const $router = useRouter();
const changeObj = reactive({});
const bbs_classData = ref([]);

const classdialogVisible = ref(false);
const isupdateclass = ref(false);

const form = reactive({
  type_code: "info_board_model",
  label: "",
  value: "",
  id: null
})


function f_Save() {
  if (form.label == "" || form.value == "") {
    ElMessage({
      // type: 'danger',
      message: `必须输入信息！`,
    })
    //ElMessageBox.alert(`必须输入信息！`);
    return;
  }
  if (isupdateclass.value) {
    $sys.upBBSClasslist(form).then(res => {
      if (res.code == 200) {
        f_GetBBSClass();
        f_msg("操作成功！");
        classdialogVisible.value = false;
      }
      else {
        f_msg("操作失败！");
      }
    })
  }
  else { //add

    $sys.addBBSClasslist(form).then(res => {
      if (res.code == 200) {
        f_GetBBSClass();
        f_msg("添加成功！");
        classdialogVisible.value = false;
      }
      else {
        f_msg("操作失败！");
      }
    })
  }
}

function f_msg(msg) {
  ElMessage({
    // type: 'danger',
    message: msg,
  })
}

function f_AddClassDlg() {
  form.label = form.value = "";
  isupdateclass.value = false;
  classdialogVisible.value = true;
}

function f_Del(obj) {
  ElMessageBox.confirm(
    '是否确定？',
    '系统消息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      $sys.delBBSClasslist(obj.id).then(res => {
        if (res.code == 200) {
          f_GetBBSClass();
          f_msg("操作完成！");
        }
      })
    })

}

function f_EditClassDlg(obj) {
  form.label = obj.label;
  form.value = obj.value;
  form.id = obj.id;
  isupdateclass.value = true;
  console.log(333, obj);
  classdialogVisible.value = true;
}

function f_GetBBSClass() {
  //var url="/user/sys_dict_data/getlist/{type_code}";getBBSClasslist
  $sys.getBBSClasslist().then(res => {
    if (res.code == 200) {
      bbs_classData.value = res.data;
    }
  })
}

onMounted(() => {

  f_GetBBSClass();
})

</script>

<style scoped>
:deep(.el-dialog) {
  padding: 5px;
  background-color: #34475b !important;
  border: 1px solid #2b3b4b !important;
  box-shadow: none !important;
}

:deep(*) {
  font-size: 17px;
}

/* :deep(.el-form-item__label) {
  color: white !important;
} */

:deep(.changemain) {
  margin-top: 20px;
  padding: 20px;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper) {
  padding: 5px;
  background-color: #34475b !important;
  /* border: 1px solid #2b3b4b !important; */
  box-shadow: none !important;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder) {
  color: #ccc !important;
}

.release_table {
  padding: 10px;
  background-color: #2F4052;

  overflow: auto;
  width: 100%;
}

.release_table::-webkit-scrollbar {
  width: 5px;
}

.release_table::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.release_table::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}
:deep(.el-table th.el-table__cell){ background: #2F4052;color:#B2C9EE;}
:deep(.el-table tr){background: #2F4052; color:#B2C9EE;}
:deep(.el-table tr:nth-child(even)){background-color:#243344;color:#B2C9EE;}
/* 自定义斑马线和鼠标移入样式 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td) {
        background-color: #263343 !important;
    }

    :deep( .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td) {
        background-color: #2F4052 !important;
    }

    :deep(.el-table--border .el-table__cell){ border: 1px #1c2b3c solid;}
    :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){border: 1px #1c2b3c solid;}

    :deep(.el-table th.el-table__cell.is-leaf){border: 1px #1c2b3c solid;}

    :deep(.el-card__header){border: 1px #1c2b3c solid;}
    :deep(.el-dialog__title){ color: #B2C9EE !important; line-height: 30px; }

    /* :deep( .el-form-item__label){color: #B2C9EE !important;}
    :deep(.el-table--border .el-table__inner-wrapper:after){background-color: #2F4052 !important;}
    :deep(.el-table--border:after) {background-color: #2F4052 !important;}
    :deep(.el-table--border:before) {background-color: #2F4052 !important;}
    :deep(.el-table__inner-wrapper:before){background-color: #2F4052 !important;} */
   
</style>

<style lang='less'>
// .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{background-color: #2F4052 !important;}
.weihweih{ 
  .el-input__wrapper, [data-v-edca96dd] .el-textarea__inner, [data-v-edca96dd] .el-select__wrapper{ border: 1px #243344 solid !important; background: #243344;}
  [data-v-edca96dd] .el-dialog__title{  color: #B2C9EE; text-indent: 10px; padding-top: 10px;}
  color: #B2C9EE;
}
changePWD {
  .el-dialog__title{ color: #B2C9EE !important;}
  .el-button>span {
    font-size: 14px !important;
  }

  .el-message-box {
    background-color: #2F4052 !important;
    cursor: default;
  }

  .el-message-box__message,
  .el-message-box__title {
    color: #fff;

  }
}
</style>
<style>

 </style>